<template>
  <div id="oprRecords" ref="oprRecords">
    <h1 class="title">操作记录</h1>
    <div class="oprRecords_con">
      <el-container>
        <el-main>
          <el-table v-loading="loading" :data="tableData" :height="height">
            <el-table-column
                fixed
                prop="Id"
                label="序号"
                min-width="150">
            </el-table-column>
            <el-table-column
                prop="FunctionName"
                label="功能名称"
                min-width="120">
            </el-table-column>
            <el-table-column
                prop="Operation"
                label="操作"
                min-width="120">
            </el-table-column>
            <el-table-column
                prop="User"
                label="操作人"
                min-width="120">
            </el-table-column>
            <el-table-column
                prop="Date"
                label="创建日期"
                min-width="200">
            </el-table-column>
            <el-table-column
                fixed="right"
                label="操作"
                min-width="100">
              <template slot-scope="scope">
                <el-button @click="handleDetailClick(scope.row)" type="text" size="mini">明细</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-main>
      </el-container>
    </div>
    <!--下面放弹框 -->
    <el-dialog title="详情" :visible.sync="dialogFlag" width="900px" top="200px">
      <div class="detailListStyle">{{DetailList}}</div>
    </el-dialog>
  </div>
</template>
<script>
  import { VHeader } from '../../../../components'
  import ajax from '../../../../api/ajax/ajax'
  import api from '../../../../api/url'
  export default {
    components: {
      VHeader
    },
    data () {
      return {
        dialogFlag: false,
        DetailList: null,
        height: null,
        tableData: [],
        loading: true
      }
    },
    methods: {
      handleDetailClick (scope) {
        this.dialogFlag = true
        this.DetailList = scope.Detail
      },
      // 查询列表信息
      queryOprRecordsList () {
        ajax.get(api.QUERY_OPERATION_RECORDS).then(res => {
          if (res.OperationRecords) {
            this.tableData = res.OperationRecords.map(item => {
              item.Date = this.getLocalDate(item.Date)
              return item
            })
          }
          this.loading = false
        })
      },
      // 时间戳转换
      getLocalDate (timestamp) {
        let newDate = new Date()
        newDate.setTime(timestamp * 1000)
        return newDate.toLocaleDateString() + newDate.toLocaleTimeString()
      }
    },
    created () {
      this.$nextTick(() => {
        this.height = this.$refs.oprRecords.offsetHeight - 56
      })
      this.queryOprRecordsList()
    }
  }
</script>
<style lang="stylus" rel="stylesheet/stylus">
  #oprRecords
    height 100%
    overflow hidden
    .title
      height 60px
      padding 15px
      line-height 30px
      font-size 18px
      font-weight normal
      background #fff
    .oprRecords_con
      padding-left 10px
    .el-dialog
      .el-dialog__body
        padding-bottom 80px !important
        .detailListStyle
          width 860px
          text-align center
          word-break break-all
</style>
